<template>
  <h2>添加门店信息</h2>
  <table class="table-bordered" border="1">
    <tr>
      <td>门店名称:</td>
      <td>
        <input type="text" v-model="shop.shop_Name" />
      </td>
    </tr>
    <tr>
      <td>门店分店</td>
      <td>
        <input type="text" v-model="shop.shop_BranchName" />
      </td>
    </tr>
    <tr>
      <td>门店地址</td>
      <td>
        <input type="text" v-model="shop.shop_Address" />
      </td>
    </tr>
    <tr>
      <td>门店电话</td>
      <td>
        <input type="text" v-model="shop.shop_Phone" />
      </td>
    </tr>
    <tr>
      <td>门店状态</td>
      <td>
        <input
          type="radio"
          name="state"
          v-model="shop.shop_State"
          :value="true"
        />
        营业中
        <input
          type="radio"
          name="state"
          v-model="shop.shop_State"
          :value="false"
        />
        停业
      </td>
    </tr>
    <tr>
      <td>门店介绍</td>
      <td>
        <input type="text" v-model="shop.shop_Info" />
      </td>
    </tr>
    <tr>
      <td>入住须知</td>
      <td>
        <input type="text" v-model="shop.shop_Notice" />
      </td>
    </tr>
    <tr>
      <td>交通信息</td>
      <td>
        <input type="text" v-model="shop.shop_Tarffic" />
      </td>
    </tr>
    <tr>
      <td>门店图片</td>
      <td>
        <img style="width: 80px; height: 80px" :src="shop.shop_Img" />
        <input type="file" @change="FileUpLoads" />
      </td>
    </tr>
    <tr>
          <td>门店图片1</td>
      <td>
        <img style="width:80px;height:80px" :src="shop.shop_Img">
        <input type="file" @change="UpFile">
      </td>
    </tr>
    <tr>
       <td>门店图片2</td>
       <td>
        <img style="width:80px;height:80px" :src="shop.shop_Img">
        <input type="file" @change="UpFiles">
       </td>
    </tr>
   
    <tr>
      <td colspan="2" style="text-align: center">
        <input type="button" value="添加" @click="AddShop" />
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";
import { request } from "node_modules/axios/index.cjs";
// 引入仓库
import {useMemberStore} from'../../stores/counter'

// 创建仓库实例
const mStore = useMemberStore()

// alert(mStore.MemberId)
//创建门店响应式数据
const shop = ref({
  shop_Id: 0,
  shop_Name: "",
  shop_BranchName: "",
  shop_Address: "",
  shop_Phone: "",
  shop_State: true,
  shop_Info: "",
  shop_Notice: "",
  shop_Tarffic: "",
  shop_Img: "",
});

// 添加门店
const AddShop = () => {
  if (shop.value.shop_Name == "") {
    alert("请输入门店名称");
    return;
    };

    axios.post('https://localhost:7071/api/Shop/AddShop', shop.value)
        .then(res => {
            if (res.data > 0) {
              alert('门店信息添加成功');
              // shop.value.shop_Name = mStore.MemberId
              // alert( mStore.MemberId)
            }
            else if (res.data == -1) {
            alert('门店名称已存在')
            }
        else{
            alert('门店信息添加失败')
        }
        })
    .catch(err => {
        console.log(err);
    })
};

// 创建文件上传响应式数据，并赋值为null(空)
const file = ref(null);

// 门店图片1  完成文件上传  any：任意类型
const UpFile = (e: any) => {
  //   获取文件对象  提交将声明好的事件对象(e)中的target属性中的files属性进行获取
  file.value = e.target.files[0]; //获取文件对象
  if (!file.value) {
    alert("请选择一个文件上传");
    return;
  }
  // 创建FormData对象
  const formDate = new FormData();
  // 将文件信息保存到FormDate中
  // append：追加  通过键值对方式保存数据  键是唯一的   值是非唯一的

  // image 自启  file.value：文件对象
  formDate.append("image", file.value);

  // 发送请求
  axios.post("https://localhost:7071/api/Files/UpFiles", formDate)
    .then((res) => {
      if (res.data.fileComm_Code == 0) {
        alert('上传文件类型必须为PNG、JPG、GIF')
      }
      else if (res.data.fileComm_Code == 1) {
        alert('文件大小超出要求')
      }
      else {
        shop.value.shop_Img = res.data.fileComm_Path;
      }
    
      
    })
    .catch((err) => {
      console.log(err);
    });
};

// 创建文件上传响应式数据，并赋值为null(空)
const f = ref(null);
// 图片上传  e：事件对象  any:任意类型
const FileUpLoads = (e:any) => {
  // 获取文件对象  将声明好的事件对象(e)中的terget属性中的files属性进行获取
  f.value = e.target.files[0];
  // 验证上传的图片/文件不能为空
  if (!f.value) {
    alert("请选择一个文件上传");
    return;
  }
  // 创建FormDate对象  用于保存文件信息
  const formDate = new FormData();
  // 使用append方法将文件信息保存到FormDate中
  formDate.append('image', f.value);

  // 发送请求
  axios.post('https://localhost:7071/api/Files/FileUpLoad', formDate)
    .then(res => {
      console.log(res.data);
      // shop.value.shop_Img = res.data.fileComm_Path;
      // 图片上传失败  fileComm_Code:状态码  fileComm_Msg:提示信息
      if (res.data.fileComm_Code == 0) {
        alert(res.data.fileComm_Msg)
      }
      else if (res.data.fileComm_Code == 1) {
        alert(res.data.fileComm_Msg)
      }
      else {
        // 图片上传成功
       shop.value.shop_Img = res.data.fileComm_Path
      }
    })
    .catch(err => {
      console.log(err);
    })
 
}



// 创建文件上传响应式数据，并赋值为null(空)
const fi = ref(null);
// 文件图片上传2
const UpFiles = (e:any) => {
  // 获取文件对象 将声明好的事件对象(e)中的tergat属性中的files属性进行获取
  fi.value = e.target.files[0];
  //  验证上传的图片/文件不能为空
  if (!fi.value) {
    alert("请选择一个文件上传");
    return;
  }
  // 创建FormData对象 用于保存上传图片信息
  const formDate = new FormData();
  //  使用FormDatada对象中的append方法将文件信息保存到formDate中
  formDate.append('image', fi.value);

  // 发送请求
  axios.post('https://localhost:7071/api/Files/UpdateFile', formDate)
    .then(res => {

      shop.value.shop_Img = res.data;
    })
    .catch(err => {
      console.log(err);
  })
}


</script>

<style scoped>
</style>